<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div class="search_item">
                        <span style="width: 1.2rem">设备名称</span>
                        <el-input v-model="search_name" placeholder="请输入设备名称" style="width: 2rem"
                            @keyup.enter="search"></el-input>
                    </div>
                </div>
                <div class="search_item">
                    <el-button type="primary" class="btn_bgcolor" @click="search">搜索</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                    <el-button type="success" @click="addnew">新增</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div class="mytabbox" style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
                    <Table :tableheader="tableheader" :tabledata="tabledata" ref="mytable" czwidth="300px">
                        <template v-slot:btns="row">
                            <el-button @click="detail(row.row)" type="primary" size="small" style="margin-right: 0.1rem">
                                详情
                            </el-button>
                            <el-button @click="edit(row.row)" type="success" size="small" style="margin-right: 0.1rem">
                                修改
                            </el-button>
                            <el-button @click="dongjie(row.row)" type="warning" size="small" style="margin-right: 0.1rem">
                                {{ row.row.isdel == 1 ? '冻结' : '启用' }}
                            </el-button>
                            <el-button @click="detelerow(row.row)" type="danger" size="small" style="margin-right: 0.1rem">
                                删除
                            </el-button>
                        </template>
                    </Table>
                </div>
            </div>
        </div>


        <addcheng ref="tcbox"></addcheng>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../../api/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import addcheng from './addcheng.vue';


//新增弹出----------

let tcbox = ref<any>(null)
const addnew = () => {
    if(tcbox.value){
        tcbox.value.showflag = true
    }
    
}
//新增弹出end------------------

//详情-----------------------------
const detail = (row: any) => {
    post({
        url: "/admin/School/FacilityDetails",
        data: {
            id:row.id
        }
    }).then((res: any) => {
        tcbox.value.showflag = true
        tcbox.value.isedit = false
        tcbox.value.title = '设备详情'
        tcbox.value.ruleForm.code=res.data.code
        tcbox.value.ruleForm.device_name=res.data.device_name
        tcbox.value.ruleForm.model=res.data.model
        tcbox.value.ruleForm.intro=res.data.intro
    });
}
//详情end--------------------------

//修改-----------------------------
const edit = (row: any) => {
    post({
        url: "/admin/School/FacilityDetails",
        data: {
            id:row.id
        }
    }).then((res: any) => {
        tcbox.value.showflag = true
        tcbox.value.isedit = true
        tcbox.value.title = '编辑设备'
        tcbox.value.ruleForm.code=res.data.code
        tcbox.value.ruleForm.device_name=res.data.device_name
        tcbox.value.ruleForm.model=res.data.model
        tcbox.value.ruleForm.intro=res.data.intro
        tcbox.value.ruleForm.id=res.data.id
    });
}
//修改end--------------------------


//冻结----------------
const dongjie = (row: any) => {
    let texttip = row.isdel == 1 ? '您确定冻结该设备吗？' : '您确定启用设备吗？'
    console.log(row);
    ElMessageBox.confirm(
        texttip,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            
            post({
                url: "/admin/School/editFacilityStatus",
                data: {
                    id:row.id,
                    type:1,
                    status:row.isdel == 1 ? 2 : 1
                }
            }).then((res: any) => {
                ElMessage.success("操作成功!");
                getdata()
            });
        })
}
//冻结end------------

//删除----------------
const detelerow = (row: any) => {
    ElMessageBox.confirm(
        '确定删除该设备吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {            
            post({
                url: "/admin/School/editFacilityStatus",
                data: {
                    id:row.id,
                    type:2,
                    status:row.isdel
                }
            }).then((res: any) => {
                ElMessage.success("删除成功!");
                getdata()
            });
        })
}
//删除end-------------



//搜索字段
let search_name = ref('')
let search_type = ref(0)
//定义表头的数据
const tableheader = ref([
    { key: "device_name", name: "设备名称", width: "" },
    { key: "code", name: "设备编号", width: "" },
    { key: "model", name: "设备型号", width: "" },
    { key: "intro", name: "简介", width: "" },
    {
        key: "isdel",
        name: "状态",
        width: "100",
        type: "tags",
        typedata: [
            { type: 'success', value: 1, label: '正常' },
            { type: 'danger', value: 2, label: '冻结' },
        ],
    },
    { key: "addtime", name: "时间", width: "" },
]);
//定义表格的数据
let tabledata = ref([

]);
const mytable = ref({ currentp: 1 })

// 在 onMounted 钩子中发送请求
onMounted(() => {

    console.log(mytable.value?.currentPage)
    getdata()
});

const getdata = () => {
    post({
        url: "/admin/School/facilityList",
        data: {
            device_name: search_name.value,//搜索名称
            p: mytable.value?.currentPage,//当前页数
            size: 15,//每页显示数量
        },
    }).then((res: any) => {
        // mytable.value.total = 0
        tabledata.value = res.data
    });
}
const search = () => {
    mytable.value.currentPage=1
    getdata()
}
const reset = () => {
    search_name.value = ''
    search_type.value = 0
    mytable.value.currentPage=1
    getdata()
}

provide('getdata', getdata);


</script>


<style lang="scss" scoped>
@import url('../../index.scss');
</style>